import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'chain-detail',
  templateUrl: './chain-detail.component.html',
  styleUrls: ['./chain-detail.component.scss']
})
export class ChainDetailComponent implements OnInit {
  baseData = {
    enName: 'Bitcoin/BTC',
    zhName: '比特币',
    place: 177,
    publicTime: '2008-11-01',
    pdf: 'http://www.bitcoin.org/bitcoin.pdf',
    webSite: 'https://www.bitcoin.com',
    chainSite: 'http://blockchain.info',
    concept: '智能合约'
  };
  price: number = 51047;
  maxPrice: number = 51516;
  minPrice: number = 50329;
  dealRankNumber: number = 852493175583;
  dealMany: number = 17189837;

  private categoryData: string[] = [];
  private lineDataValue: number[] = [];
  private lineDataPrice: number[] = [];
  private barDate: number[] = [];
  private oneDay = 24 * 3600 * 1000;
  private now: Date = new Date(2018, 7, 1);
  //货币趋势
  currencyTrend: any;
  //市值图标
  dealOption = {
    title: {
      text: '占全球总市值',
      x: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series: [{
      name: '占全球总市值',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 335, name: '' },
        { value: 310, name: '' }
      ]
    }]
  }
  //流通量
  manyOption = {
    title: {
      text: '占全球总市值',
      x: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series: [{
      name: '占全球总市值',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 800, name: '' },
        { value: 200, name: '' }
      ]
    }]
  }
  //成交额
  timeOption = {
    title: {
      text: '占全球总市值',
      x: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series: [{
      name: '占全球总市值',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 500, name: '' },
        { value: 500, name: '' }
      ]
    }]
  }
  constructor() { }

  ngOnInit() {
    this.initCurrencyChart();
  }


  //初始化价格趋势图
  initCurrencyChart() {
    for (let i = 0; i < 30; i++) {
      this.now = new Date(this.now.getTime() + this.oneDay);
      let nowDate = this.forMatterDate(this.now);
      this.categoryData.push(nowDate);
      this.lineDataValue.push(Math.round(Math.random() * 100000 + 20));
      this.lineDataPrice.push(Math.round(Math.random() * 500 + 10));
      this.barDate.push(Math.round(Math.random() * 600000 + 500));
    };
    this.currencyTrend = {
      //backgroundColor: '#fff',
      title: {
        text: 'BTC价格趋势',
        left: 'center'
      },
      legend: [{
        bottom: 10,
        left: 'center',
        data: ['市值', '价格', '24h 成交量']
      }],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        },
        backgroundColor: 'rgba(245, 245, 245, 0.8)',
        borderWidth: 1,
        borderColor: '#ccc',
        padding: 10,
        textStyle: {
          color: '#000'
        }
      },
      axisPointer: {
        link: { xAxisIndex: 'all' },
        label: {
          backgroundColor: '#777'
        }
      },
      grid: [{
        left: '10%',
        right: '8%',
        height: '40%'
      },
      {
        left: '10%',
        right: '8%',
        top: '65%',
        height: '16%'
      }],
      xAxis: [{
        type: 'category',
        data: this.categoryData,
        scale: true,
        boundaryGap: false,
        axisLine: { onZero: false },
        splitLine: { show: false },
        splitNumber: 20,
        min: 'dataMin',
        max: 'dataMax',
        axisPointer: {
          z: 100
        }
      }, {
        type: 'category',
        gridIndex: 1,
        data: this.categoryData,
        scale: true,
        boundaryGap: false,
        axisLine: { onZero: false },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        splitNumber: 20,
        min: 'dataMin',
        max: 'dataMax'
      }],
      yAxis: [{
        name: '市值（亿）',
        scale: true,
        gridIndex: 0,
        axisLine: {
          lineStyle: {
            color: '#c23531'
          }
        }
      }, {
        name: '价格（美元）',
        scale: true,
        gridIndex: 0,
        axisLine: {
          lineStyle: {
            color: '#2f4554'
          }
        }
      }, {
        scale: true,
        gridIndex: 1,
        axisLabel: { show: false },
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: false }
      }],
      dataZoom: [{
        type: 'inside',
        xAxisIndex: [0, 1],
        start: 0,
        end: 100
      }, {
        show: true,
        xAxisIndex: [0, 1],
        type: 'slider',
        top: '85%',
        start: 98,
        end: 100
      }],
      series: [{
        name: '市值',
        type: 'line',
        data: this.lineDataValue,
        smooth: true,
        symbol: 'none',

      }, {
        name: '价格',
        type: 'line',
        data: this.lineDataPrice,
        smooth: true,
        symbol: 'none',
        yAxisIndex: 1,
      }, {
        name: '24h 成交量',
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 2,
        data: this.barDate
      }]
    }
  }

  /**
   * 
   * @param date {string}
   * @description 格式化日期
   */
  forMatterDate(date): string {
    let year = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-');
    return year;
  }
}
